<template>
	<view class="remarks">
		<view class="remark_top">
			<view class="remark_title">设置备注和标签</view>
			<view @tap="saveRemark" class="re_complete">完成</view>
		</view>
		
		<view class="remark_box">
			<view class="remark_text">备注</view>
			<view class="remark_input">
				<input class="reinput" type="text" v-model="info.remark"></input>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:0,
				type: '',
				userinfo: [],
				info:{}
			}
		},
		onLoad(option){
			this.id = option.id ? option.id:0;
			this.type = option.type ? option.type:'user';
			this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
			this.ws.pageFun(this.pageDataLoad, this);
		},
		methods:{
			pageDataLoad: function (refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': that.type,
						'id': that.id ? that.id:that.userinfo.id,
						'requestor': that.userinfo.id,
						'refresh': refresh
					}
				})
			},
			saveRemark: function () {
				if (this.info.remark != this.info.oldRemark) {
					let message = {
						c: 'User',
						a: 'updateFriendInfo',
						data: {
							id: this.info.id,
							new_remark: this.info.remark,
							method: 'update_remark'
						}
					}
					this.ws.send(message);
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.remark_top{
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	.remark_title{
		font-size: 40rpx;
		font-weight: 600;
	}
	.re_complete{
		position: absolute;
		right: 20rpx;
		background-color: #05C160;
		padding: 15rpx 25rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
	}
}

.remark_box{
	padding: 40rpx;
	.remark_text{
		color: #747474;
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	.remark_input{
		background-color: #F7F7F7;
		padding: 30rpx;
		margin-top: 10rpx;
		border-radius: 12rpx;
	}
}
.re_complete{
	
}
</style>